<template>
  <div class="pd10">
    <el-row>
      <el-col :span="6">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="区域">
            <div style="width:217px;">
              <el-input v-model="form.name" placeholder="填中英文,数字,-"></el-input>
            </div>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">添加</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="10">
        <!--表格begin-->
        <el-table :data="tableData" stripe  height="780">
          <el-table-column prop="id" label="id" width="180" sortable></el-table-column>
          <el-table-column prop="name" label="区域" width="180"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size @click.stop="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size type="danger" @click.stop="showDialogDel(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--表格end-->
      </el-col>
    </el-row>

    <el-dialog title="修改区域名称" :visible.sync="dialogVisibleModify" width="30%" >
      <el-input ref="haha" v-model="quaInput" placeholder="请输入内容" ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleModify = false">取 消</el-button>
        <el-button type="primary" @click="modifyQua">修 改</el-button>
      </span>
    </el-dialog>

    <el-dialog
  title="提示"
  :visible.sync="dialogVisibleDel"
  width="30%"
  >
  <span>确定删除<span style="color:#e00;">{{tableRow.name}}</span>吗?</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleDel = false">取 消</el-button>
    <el-button type="primary" @click="_showDialogDel(tableIdx,tableRow)">删 除</el-button>
  </span>
</el-dialog>

  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      quaInput: "",
      quaInputId: "",
      dialogVisibleModify: false,
      dialogVisibleDel: false,
      form: {
        name: ""
      },
      tableData: [],
      tableIdx:'',
      tableRow:''
    };
  },
  mounted() {
    this.getAllMarketRegion();
  },
  methods: {
    getAllMarketRegion() {
      this.$axios.get(this.$api.crudMarketRegion).then(res => {
        this.tableData = res.data;
      });
    },
    handleEdit(idx, dt) {
      this.dialogVisibleModify = true;
      this.quaInput = dt.name;
      this.quaInputId = dt.id;
      this.$nextTick(()=>{
          this.$refs.haha.focus()      
      })
    },
    modifyQua() {
      this.$axios
        .post(this.$api.crudMarketRegion, {
          id: this.quaInputId,
          name: this.quaInput
        })
        .then(res => {
          if (res.errCode > 0) {
            this.getAllMarketRegion();
            this.$message.success({
              message: "修改成功",
              duration: 1000,
              onClose: () => {
                this.quaInput = "";
                this.quaInputId = "";
                this.dialogVisibleModify = false;
              }
            });
          } else {
            this.$message.error({
              message: "修改失败",
              duration: 1000
            });
          }
        });
    },
    showDialogDel(idx, dt) {
        this.dialogVisibleDel=true
        this.tableIdx=idx
        this.tableRow=dt
    },
    _showDialogDel(idx, dt){
      this.$axios
        .get(this.$api.crudMarketRegion, {
          params: {
            api: "del",
            id: dt.id
          }
        })
        .then(res => {
          console.log("======res删除", res);
          this.getAllMarketRegion();
          if (res.errCode > 0) {
            this.$message.success({
              message: res.msg,
              duration: 800
            });
          } else {
            this.$message.error({
              message: res.msg,
              duration: 1500
            });
          }
        });
    this.dialogVisibleDel=false
    },
    onSubmit() {
      this.$axios
        .post(this.$api.crudMarketRegion, {
          api: "create",
          name: this.form.name
        })
        .then(res => {
          if (res.errCode === 1) {
            this.$message.success({
              message: "添加成功",
              duration: 1000,
              onClose: () => {
                this.form.name = "";
              }
            });
            this.getAllMarketRegion();
          } else {
            this.$message.error({
              message: res.msg,
              duration: 1000,
              onClose: () => {
                this.form.name = "";
              }
            });
          }
        });
    }
  }
};
</script>

<style>
</style>
